import {html, LitElement, TemplateResult} from "lit";
import {customElement, property} from "lit/decorators.js";
import * as echarts from "echarts";
import style from '../echarts.css.ts';

export interface LineYProps {
    chartId?: string;
    width?: string;
    height?: string;
    legend?: string[];
    tooltip?: object;
    xUnit?: string;
    yUnit?: string;
    yAxisData?: any[];
    seriesData?: number[][];
}

@customElement('lit-line-y')
export class LitLineY extends LitElement {
    @property({ type: String }) chartId: string = 'lit-line-y-chart';
    @property({ type: String }) width: string = '600px';
    @property({ type: String }) height: string = '400px';
    @property({ type: Array }) legend: string[] = ['Altitude (km) vs. temperature (°C)'];
    @property({ type: Object }) tooltip: object = {
        trigger: 'axis',
        formatter: 'Temperature : <br/>{b}km : {c}°C'
    };
    @property({ type: String }) xUnit: string = '°C';
    @property({ type: String }) yUnit: string = 'km';
    @property({ type: Array }) yAxisData: any[] = ['0', '10', '20', '30', '40', '50', '60', '70', '80'];
    @property({ type: Array }) seriesData: number[][] = [
        [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
    ];

    getSeries(): any[] {
        return this.seriesData.map((data, index) => ({
            name: this.legend[index] || undefined,
            type: 'line',
            smooth: true,
            symbolSize: 10,
            symbol: 'circle',
            lineStyle: {
                width: 3,
                shadowColor: 'rgba(0,0,0,0.3)',
                shadowBlur: 10,
                shadowOffsetY: 8
            },
            data: data
        }));
    }

    option: echarts.EChartsOption = {
        legend: {
            data: this.legend,
        },
        tooltip: this.tooltip,
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} ${this.xUnit}'
            }
        },
        yAxis: {
            type: 'category',
            axisLine: { onZero: false },
            axisLabel: {
                formatter: '{value} ${this.yUnit}'
            },
            boundaryGap: false,
            data: this.yAxisData,
        },
        series: this.getSeries(),
    }

    static styles = style;

    updated() {
        this.option.tooltip = this.tooltip;
        (this.option.xAxis as any).axisLabel.formatter = `{value} ${this.xUnit}`;
        (this.option.yAxis as any).axisLabel.formatter = `{value} ${this.yUnit}`;
        (this.option.yAxis as any).data = this.yAxisData;
        this.option.series = this.getSeries();
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width: ${this.width}; height: ${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-line-y': LitLineY;
    }
}